<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>

    </style>
    <script src="../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
    <script>

        var m1 = angular.module('myApp', []);
        m1.controller('Aaa', ['$scope', function ($scope) {

            $scope.regText = {
                regVal: 'default',
                regList: [
                    {name: 'default', tips: '请输入用户名'},
                    {name: 'required', tips: '用户名不能为空'},
                    {name: 'pattern', tips: '用户名必须是字母'},
                    {name: 'pass', tips: '√'}
                ]
            };

            $scope.regPassword = {
                regVal: 'default',
                regList: [
                    {name: 'default', tips: '请输入密码'},
                    {name: 'required', tips: '密码不能为空'},
                    {name: 'minlength', tips: '密码至少6位'},
                    {name: 'pass', tips: '√'}
                ]
            };

            // 改变的时候触发
            $scope.change = function (reg, err) {
                for (var attr in err) {
                    if (err[attr] == true) {// 验证失败
                        $scope[reg].regVal = attr;
                        return;
                    }
                }
                $scope[reg].regVal = 'pass';// 验证成功
            };

        }]);


    </script>
</head>

<body>
<div ng-controller="Aaa">
    <form novalidate name="nForm">
        <div>
            <label>用户名:</label>
            <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/"
                   ng-blur="change('regText',nForm.nText.$error)">
            <span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6"
                   ng-blur="change('regPassword',nForm.nPassword.$error)">
            <span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span>
        </div>
    </form>
</div>
</body>
</html>
